<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <!-- label-width="85px" -->
            <el-form ref="form" :model="platformSearch" :inline="true" size="mini">
                <el-form-item label="商品名称：">
                    <el-input v-model="platformSearch.name" clearable placeholder="请输入姓名"></el-input>
                </el-form-item>
                <!-- <el-form-item label="联系方式：">
                    <el-input
                        v-model="platformSearch.phone"
                        maxlength="11"
                        clearable
                        placeholder="请输入联系方式"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="商品状态：">
                    <!-- <el-input v-model="platformSearch.car_id" clearable placeholder="请输入车牌"></el-input> -->
                    <el-select v-model="platformSearch.state" clearable placeholder="请查询的商品状态">
                        <el-option v-for="(item,index) in goodsstate" :key="item.id" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="platformTable"
                border
                height="560"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="80px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <!-- <el-table-column label="订单号" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.orderNumber }}</span>
                    </template>
                </el-table-column>-->
                <!-- <el-table-column label="申请车辆" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_id }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="商品名称" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品价格" width="220px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}元 + {{ scope.row.integral }}积分</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属分类" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.kind_id | kindname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品图片" width="120px">
                    <template slot-scope="scope">
                        <div @click="browseStoreUrl(scope.$index, scope.row)">
                            <img :src="scope.row.image_url" style="width:60px;" alt="分类图片" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="销量" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sale }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品详情" width="100px">
                    <template slot-scope="scope">
                        <span class="cup dib" @click="lookgoodsdetails(scope.$index, scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品状态" width="120px">
                    <template slot-scope="scope">
                        <el-switch
                            v-if="jurisdiction.update_state === 1"
                            class="switch"
                            @change="shelfswitch(scope.$index, scope.row)"
                            v-model="scope.row.state"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="上架"
                            inactive-text="下架">
                        </el-switch>
                        <span v-else>{{ goodsstate[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付类型" width="110px">
                    <template slot-scope="scope">
                        <span>{{ goodstype[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="所需积分" width="120px">
                    <template slot-scope="scope">
                        <div @click="browseProveUrl(scope.$index, scope.row)">
                            <img :src="scope.row.image_url" style="width:50px;" alt="证书图片" />
                        </div>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="添加时间" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_id | createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="140px">
                    <template slot-scope="scope">
                        <span>{{ runstate[scope.row.state] }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.reason }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="240px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                        <!-- <span v-if="scope.row.state !== 0">已审批</span>
                        <el-button
                            v-else
                            size="small"
                            type="warning"
                            @click="approval(scope.$index, scope.row)"
                        >审批</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <el-dialog center width="700px" :visible.sync="dialogVisible">
                <div style="text-align:center;">
                    <img width="250px" height="auto" :src="dialogImageUrl" alt />
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="550px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editPlatform" ref="editPlatform" :rules="rules">
                    <el-form-item prop="name" label="商品名称：" :label-width="formLabelWidth">
                        <el-input v-model="editPlatform.name" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="kind_id" label="商品价格：" :label-width="formLabelWidth">
                        <el-select v-model="editPlatform.kind_id" clearable placeholder="请选择商品分类">
                            <el-option v-for="item in classifyame" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="price" label="商品价格：" :label-width="formLabelWidth">
                        <el-input v-model="editPlatform.price" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态：" :label-width="formLabelWidth">
                        <el-switch
                            class="switch"
                            v-model="editPlatform.state"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="上架"
                            inactive-text="下架">
                        </el-switch>
                    </el-form-item>
                    <el-form-item prop="type" label="支付方式：" :label-width="formLabelWidth">
                        <el-select v-model="editPlatform.type">
                            <el-option v-for="(item,index) in goodstype" :key="index" :label="item" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所需积分：" v-show="editPlatform.type === 1" :label-width="formLabelWidth"  prop="integral">
                        <el-input v-model="editPlatform.integral" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片" :label-width="formLabelWidth" prop="image_url">
                        <el-upload
                            ref="image_url"
                            v-model="editPlatform.image_url"
                            action="/index.php/fileUpload/upload"
                            name="image"
                            :show-file-list="false"
                            list-type="picture-card"
                            :on-preview="coverPreview"
                            :on-success="handleupdate"
                        >
                            <img v-if="editPlatform.image_url" :src="editPlatform.image_url" class="avatar" />
                            <i v-else class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 审批对话框 -->
            <el-dialog
                title="添加"
                width="500px"
                :visible.sync="approvalVisible"
                center
                @close="closeApproval"
            >
                <el-form :model="approvalPlatform" ref="approvalPlatform" :rules="rules">
                    <el-form-item prop="name" label="商品名称：" :label-width="formLabelWidth">
                        <el-input v-model="approvalPlatform.name" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="kind_id" label="商品价格：" :label-width="formLabelWidth">
                        <el-select v-model="approvalPlatform.kind_id" clearable placeholder="请选择商品分类">
                            <el-option v-for="item in classifyame" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="price" label="商品价格：" :label-width="formLabelWidth">
                        <el-input v-model="approvalPlatform.price" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态：" :label-width="formLabelWidth">
                        <el-switch
                            class="switch"
                            v-model="approvalPlatform.state"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="上架"
                            inactive-text="下架">
                        </el-switch>
                    </el-form-item>
                    <el-form-item prop="type" label="支付方式：" :label-width="formLabelWidth">
                        <el-select v-model="approvalPlatform.type">
                            <el-option v-for="(item,index) in goodstype" :key="index" :label="item" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所需积分：" v-show="approvalPlatform.type === 1" :label-width="formLabelWidth"  prop="integral">
                        <el-input v-model="approvalPlatform.integral" clearable placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片" :label-width="formLabelWidth" prop="image_url">
                        <el-upload
                            ref="image_url"
                            v-model="approvalPlatform.image_url"
                            action="/index.php/fileUpload/upload"
                            name="image"
                            :show-file-list="false"
                            list-type="picture-card"
                            :on-preview="coverPreview"
                            :on-success="handleadd"
                        >
                            <img v-if="approvalPlatform.image_url" :src="approvalPlatform.image_url" class="avatar" />
                            <i v-else class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelApproval">取消</el-button>
                    <el-button type="primary" @click="confirmApproval">提交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {date} from "../../util/time.js"
import {formatDate} from "../../util/time.js"
var that
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            editVisible: false, //修改对话框
            approvalVisible: false, //审批对话框
            formLabelWidth: "100px", //对话框的label宽度
            classifyame: null,
            goodsstate: ["下架","上架"],
            editPlatform: {
                // 修改对话框
                id: "",
                name: "",//	商品名称
                price: "",//价格
                kind_id: "",//外键，对应分类表id
                image_url: "",//商品图片
                sale: "",//销量
                state: "",//0下架，1上架
                type: "",//0现金，1积分+现金
                integral: ""
            },
            approvalPlatform: {
                // 审批对话框
                name: "",//	商品名称
                price: "",//价格
                kind_id: "",//外键，对应分类表id
                image_url: "",//商品图片
                sale: "",//销量
                state: "",//0下架，1上架
                type: "",//0现金，1积分+现金
                integral: ""
            },
            platformSearch: {
                //搜索
                name: "",//姓名
                state: "", //车牌
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            rules:{
                name:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                price:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                kind_id:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                image_url:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                state:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                type:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
                integral:[
                    {required: true, message: "请输入商品名称", trigger: "blur"}
                ],
            },
            platformTable: [
                {
                    recordId: 1, //平台车辆Id
                    car_id: "愼襡", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B13512", //车牌
                    carType: "小汽车", //车辆类型
                    platform: "滴滴", //合作平台
                    end_time: "2023-09-15", //到期时间
                    createTime: "2020-09-15", //添加时间orderTime
                    status: "审批中" //状态status
                },
                {
                    recordId: 2, //平台车辆Id
                    car_id: "亦是", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B746d5", //车牌
                    carType: "越野", //车辆类型
                    platform: "滴滴1", //合作平台
                    end_time: "2021-10-28", //到期时间
                    createTime: "2020-09-15", //添加时间orderTime
                    status: "已通过" //状态status
                },
                {
                    recordId: 3, //平台车辆Id
                    car_id: "无畏", //用户名nickName
                    name: "123", //姓名
                    phone: "17348567495", //联系方式phone
                    vin: "深圳", //车架号
                    car_id: "粤B7s635", //车牌
                    carType: "商务", //车辆类型
                    platform: "滴滴2", //合作平台
                    end_time: "2024-09-20", //到期时间
                    createTime: "2020-07-23", //添加时间orderTime
                    status: "已拒绝" //状态status
                }
            ],
            selectTable: [], //选中要删除的数组
            cartype:[
                {id:1,name:"轿车"},
                {id:2,name:"SUV"},
                {id:3,name:"MPV"},
            ],
            goodsstate:["下架","上架"],
            goodstype: ["现金支付","现金+积分"]
        };
    },
    filters: {
        
        // 车牌plateNumber
        kindname(id){
            if(that.classifyame !== null){
                that.classifyame.forEach(item=>{
                    id === item.id ? id = item.name : "";
                })
            }
            return id
        },
        // 时间戳转换
        formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        browseProveUrl(index, row) {
            this.dialogImageUrl = row.proveUrl;
            this.dialogVisible = true;
        },
        handleupdate(resp,file,fileList){
            console.log(resp,file,fileList)
            this.editPlatform.image_url = "https://dzylab.dpyun.site/storage/"+resp.data;
            // console.log(this.approvalPlatform)
        },
        handleadd(resp,file,fileList){
            console.log(resp,file,fileList)
            this.approvalPlatform.image_url = "https://dzylab.dpyun.site/storage/"+resp.data;
            // console.log(this.approvalPlatform)
        },
        // 图片预览
        coverPreview(file) {
            // 点击文件列表中已上传的文件时的钩子
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        browseStoreUrl(index, row) {
            this.dialogImageUrl = row.image_url;
            this.dialogVisible = true;
        },
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            for(var i in this.platformSearch) this.platformSearch[i] !== "" ? data[i] = String(this.platformSearch[i]) : "";
            utils.request("/goods/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.platformTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    resp.data.data.total 
                    ? this.$message({
                        message: "找到"+resp.data.data.total+"条运营车辆申请数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据");
                }else{return}
            }) 
        },
        shelfswitch(index,row){
            let that = this;
            utils.request("/goods/update","post",JSON.stringify({id:row.id,state:row.state})).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    // console.log(row.name+"成功"+(row.state?"下架！":"上架！"))
                    this.$message({
                        message: row.name+"成功"+(row.state?"上架！":"下架！"),
                        type: "success"
                    })
                }else{return}
            })
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            // this.editPlatform.name = row.name;
            // this.editPlatform.car_id = row.car_id;
            for(var i in this.editPlatform) this.editPlatform[i] = row[i] //!== "" ? data[i] = this.editPlatform[i] : data[i] = "0";
            this.editPlatform.index = index;
        },
        confirmEdit() {
            // 确认修改对话框
            this.$refs["editPlatform"].validate((valid)=>{
                if(valid){
                    let data = {};
                    for(var i in this.editPlatform) this.editPlatform[i] !== null ? data[i] = this.editPlatform[i] : data[i] = "0";
                    data.price = data.price.substring(data.price.length - 3) === ".00" ? data.price : data.price +".00"
                    delete data.index;
                    console.log(data)
                    utils.request("/goods/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            let key = this.editPlatform.index;
                            this.platformTable.splice(key,1,data)//length < this.currentCount ? this.platformTable.push(data) : "";
                            this.editPlatform[i] = "";
                            this.editVisible = false;
                            this.$message({
                                message: "修改成功！",
                                type:"success "
                            })
                        }else{return}
                    })
                }else{return}
            })
        },
        cancelEdit() {
            // 取消修改对话框
            this.editVisible = false;
            for(var i in this.editPlatform) this.editPlatform[i] = "";
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            for(var i in this.editPlatform) this.editPlatform[i] = "";
        },
        lookgoodsdetails(index,row){
            // 商品详情
            this.$router.push({path:"/goodsdetails",query:{row:JSON.stringify(row)}})
            // this.$router.push({ path: "/integralDetails", query: { row: JSON.stringify(row)} });
        },
        remove(index, row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/goods/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    // console.log(resp,data)
                    if(resp.data.code === 200){
                        this.platformTable.splice(index,1)
                        this.$message({
                            message: "删除成功！",
                            type:"success "
                        })
                    }else{return}
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        add(){
            this.approvalVisible = true;
        },
        approval(index, row) {
            // 审批
            console.log(index, row);
            this.approvalVisible = true;
            for(var i in this.approvalPlatform) this.approvalPlatform[i] = row[i];
            this.approvalPlatform.index = index;
            // this.approvalPlatform.name = row.name;
            // this.approvalPlatform.car_id = row.car_id;
            // this.approvalPlatform.end_time = row.end_time;
            // this.approvalPlatform.platform = row.platform;
        },
        confirmApproval() {
            // 通过审批对话框
            // console.log(this.approvalPlatform)
            let data = {};
            for(var i in this.approvalPlatform) this.approvalPlatform[i] !== "" ? data[i] = this.approvalPlatform[i] : data[i] = "0";
            data.price = data.price + ".00"
            console.log(data)
            utils.request("/goods/add","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    data.id = resp.data.data;
                    this.platformTable.length < this.currentCount ? this.platformTable.push(data) : "";
                    this.approvalPlatform[i] = "";
                    this.approvalVisible = false;
                    this.$message({
                        message: "添加成功！",
                        type:"success "
                    })
                }else{return}
                
            })
        },
        cancelApproval() {
            // 拒绝审批对话框
            this.approvalVisible = false;
            for(var i in this.approvalPlatform) this.approvalPlatform[i] = ""
        },
        closeApproval() {
            // 关闭审批对话框
            this.approvalVisible = false;
            for(var i in this.approvalPlatform) this.approvalPlatform[i] = ""
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/kind/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            console.log(resp)
            this.classifyame = resp.data.data.data;
            this.searchClick(1)
        })
    },
    computed: {},
    watch: {},
    beforeCreate() {
        that = this;
    }
};
</script>

<style scoped>
/* .flex {
    display: flex;
    flex-flow: row wrap;
}
.avatar {
    width: 100%;
    height: 100%;
    display: block;
}
.store{
    width: calc(100% - 130px);
    padding: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 5px;
} */
</style>
<style>
/* 开关样式修改 */
    .el-switch__label {
        position: absolute;
        display: none;
        font-size: 11px !important;
        color: #fff!important;
    }
    .el-switch__label *{
        font-size: 11px !important;
    }
    /*打开时文字位置设置*/
    /* switch按钮样式 */
    .switch .el-switch__label {
        position: absolute;
        display: none;
        color: #fff !important;
    }
    /*打开时文字位置设置*/
    .switch .el-switch__label--right {
        z-index: 10;
    }
    /* 调整打开时文字的显示位子 */
    .switch .el-switch__label--right span{
        margin-right: 15px;
    }
    /*关闭时文字位置设置*/
    .switch .el-switch__label--left {
        z-index: 10;
    }
    /* 调整关闭时文字的显示位子 */
    .switch .el-switch__label--left span{
        margin-left: 18px;
    }
    /*显示文字*/
    .switch .el-switch__label.is-active {
        display: block;
    }
    /* 调整按钮的宽度 */
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
        width: 50px !important;
        margin: 0;
    }
</style>